<template>
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-form :model="queryForm" label-width="50px">
        <el-row :gutter="24">
          <el-col :span="3">
            <el-form-item label="名称:">
              <el-select
                v-model="queryForm.name"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in this.$config.APP_NAME"
                  :key="Number(index)"
                  :label="item"
                  :value="Number(index)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="类型:">
              <el-select
                v-model="queryForm.appType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in this.$config.APP_TYPE"
                  :key="Number(index)"
                  :label="item"
                  :value="Number(index)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button type="default" @click="loadTableData">查询</el-button>
            <el-button type="default" @click="resetQuery">重置</el-button>
            <el-button
              type="primary"
              @click="addAppVersion"
              v-show="$btnPermission.verify('AppVersionAdd')"
              >新增</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </ToolBar>

    <!-- 表格 -->
    <TablePage
      ref="appVersionTablePage"
      :customTableHeight="255"
      :loading.sync="loading"
      :table-data="appVersionTableDatas"
      :columns="columns"
      @reloadData="loadTableData"
    />

    <!-- 添加 -->
    <AddAppVersion
      ref="addAppversion"
      :title.sync="addAppVersionTitle"
      :showDialog.sync="addAppVersionVisible"
      :rowId.sync="rowId"
      @reloadData="loadTableData"
    />
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";
import TablePage from "@/components/TablePage/index.vue";
import ToolBar from "@/components/ToolBar/index.vue";

import AddAppVersion from "../components/addAppVersion.vue";

import { appVersionPage, appVersionRelease } from "@/api/app-version";

export default {
  name: "VersionPage",
  components: {
    PageCard,
    TablePage,
    ToolBar,
    AddAppVersion,
  },
  data() {
    return {
      queryForm: null,
      initForm: {
        name: void 0,
        appType: void 0,
      },
      loading: false,
      appVersionTableDatas: [],
      columns: [
        {
          title: "名称",
          name: "name",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.APP_NAME,
        },
        {
          title: "类型",
          name: "appType",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.APP_TYPE,
        },
        {
          title: "版本",
          name: "version",
          width: 150,
          align: "center",
        },
        {
          title: "强制更新",
          name: "isForce",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.YES_NO,
        },
        {
          title: "文件大小(MB)",
          name: "fileSize",
          align: "center",
          width: 150,
        },
        {
          title: "备注",
          name: "remark",
          align: "center",
          width: 300,
        },
        {
          title: "发布",
          name: "isRelease",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.YES_NO,
        },
        {
          title: "发布人",
          name: "releaseName",
          width: 150,
          align: "center",
        },
        {
          title: "创建人",
          name: "createName",
          width: 150,
          align: "center",
        },
        {
          title: "创建时间",
          name: "createTime",
          width: 200,
          align: "center",
        },
        {
          title: "修改时间",
          name: "modifyTime",
          width: 200,
          align: "center",
        },
        {
          title: "操作",
          name: "operate",
          width: 250,
          align: "center",
          operate: [
            {
              name: "编辑",
              permission: "EditAppVersion",
              fun: this.editAppVersion,
              onShow: (row) => {
                return !row.isRelease || row.isRelease === 0;
              },
            },
            {
              name: "发布",
              fun: this.releaseAppVersion,
              permission: "ReleaseAppVersion",
              confirm: true,
              message: "确定发布选择的数据吗?",
              onShow: (row) => {
                return !row.isRelease || row.isRelease === 0;
              },
              customStyle: {
                "margin-left": "10px",
              },
            },
          ],
        },
      ],
      addAppVersionTitle: null,
      addAppVersionVisible: false,
      rowId: null,
    };
  },
  created() {
    this.queryForm = { ...this.initForm };
    this.$nextTick(() => {
      this.loadTableData();
    });
  },
  methods: {
    //加载数据
    async loadTableData() {
      this.loading = true;
      console.log(this.queryForm);
      const { pageNumber, pageSize } = this.$refs.appVersionTablePage.page;
      const res = await appVersionPage({
        pageNumber,
        pageSize,
        ...this.queryForm,
      });
      this.$refs.appVersionTablePage.page.pageNumber = res.data.pageNumber;
      this.$refs.appVersionTablePage.page.pageSize = res.data.pageSize;
      this.$refs.appVersionTablePage.page.total = res.data.total;
      this.appVersionTableDatas = res.data.rows;
      this.loading = false;
    },

    // 重置查询
    resetQuery() {
      this.queryForm = { ...this.initForm };
      this.loadTableData();
    },

    // 添加
    addAppVersion() {
      this.addAppVersionTitle = "新增";
      this.addAppVersionVisible = true;
    },

    // 编辑
    editAppVersion(row) {
      if (!row) return;

      this.rowId = row.id;
      this.addAppVersionTitle = "编辑";
      this.addAppVersionVisible = true;
    },

    // 发布
    async releaseAppVersion(row) {
      if (!row) return;

      try {
        await appVersionRelease(row.id);
        this.loadTableData();
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-card-container {
  ::v-deep .el-divider--horizontal {
    margin: 0px 0 !important;
    margin-bottom: 24px !important;
  }
}
</style>
